<template>
  <div id="goods-page">
    <c-title :hide="false" text="商品详情"></c-title>
    <div class="goods-img">
      <img :src="getGoods.thumb" mode="widthFix" />

      <div class="floating" v-if="lately.length > 0">
        <van-notice-bar :scrollable="false">
          <van-swipe vertical class="notice-swipe" :autoplay="3000" :show-indicators="false">
            <van-swipe-item v-for="(item, index) in lately" :key="index">{{ item.nickname }}刚刚下单了此商品</van-swipe-item>
          </van-swipe>
        </van-notice-bar>
      </div>
      <div class="img-footer flex-j-sb flex-a-c">
        <div class="flex">
          <div class="distance" v-if="locationMore">
            <span class="iconfont icon-service_n"></span>
            <span>{{ item.distance | kmUnit }}</span>
          </div>
        </div>
        <div class="img-right flex" v-if="beginStatus === 0">
          <div class="flex-a-c">
            <div class="time-end">
              <van-count-down :time="afterTimeData(aroundGoods.beginTime)" format="DD 天 HH 时 mm 分 ss 秒" />
            </div>
            <div>
              <div class="time-end">距离开售</div>
            </div>
          </div>
        </div>
        <div class="img-right flex" v-else>
          <div class="time-end" v-if="computingTime(presentTime, aroundGoods.endTime)">活动结束</div>
          <div class="flex-a-c" v-else-if="points(aroundGoods.endTime)">
            <div class="time-end">
              <van-count-down :time="beforeDay(aroundGoods.endTime)" format="HH 时 mm 分 ss 秒" />
            </div>
            <div>
            <div class="time-end">即将下架</div>
            </div>
          </div>
          <div class="flex" v-else>
            <div class="panic ">抢购中</div>
          </div>
        </div>
      </div>
    </div>

    <template v-if="showPage">
      <div class="discount-price flex-a-c flex-j-sb">
        <div class="discount-left flex" ref="discountLeft">
          <div class="discount-use flex">
            <span>￥</span>
            <p class="number">{{ getGoods.price }}</p>
          </div>
          <div class="consumer flex">
            <span>门市价￥{{ getGoods.market_price }}</span>
            <p class="repertory" v-if="getGoods.show_stock">库存：{{ getGoods.stock }}</p>
          </div>
        </div>
        <!--  v-if="discountRightWidth >= 230 || discountLeftWidth >= 156" -->
        <div class="discount-right flex-c flex-a-c" ref="discountRight">
          <div class="price flex">
            <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images/goods-icon.png" />
            <p>已售 {{ getGoods.show_sales }}份</p>
          </div>
          <div class="flex-d flex-a-c">
            <div class="reach reach-margin">火爆抢购中</div>
          </div>
        </div>
      </div>
      <div class="goods-title">
        <div class="title">{{ getGoods.title }}</div>
        <div class="long-title">{{aroundGoods.long_title}}</div>
      </div>

      <div class="entrance-store" v-if="shopAddress">
        <div class="flex mb_14">
          <p class="attribute">规格</p>
          <p class="text">最多购买{{ aroundGoods.singleMax }}份</p>
        </div>
        <div class="flex-j-sb flex-a-c mb_14">
          <div class="flex left">
            <p class="attribute">门店</p>
            <p class="text pl">{{ shopAddress.name }}</p>
          </div>
          <div class="right flex-a-c" @click="storeNav">
            <span>{{ count }}家店适用</span>
            <span class="iconfont icon-advertise-next"></span>
          </div>
        </div>
        <div class="region">{{ shopAddress.address }}</div>
        <div class="location flex-a-c">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/consumption-coupons/location.png" v-if="query.longitude && query.latitude" />
          <span class="distance" v-if="query.longitude && query.latitude">距您{{ shopAddress.distance | kmUnit }}</span>
          <div class="navigation flex-a-c" @click.stop="navigation(shopAddress.latitude, shopAddress.longitude, shopAddress.name)">
            <div>导航</div>
            <span class="iconfont icon-advertise-next"></span>
          </div>
          <div>
            <div class="merchant flex-a-c" @click="callStore(shopAddress.phoneNumber)">
              <div class="iconfont icon-zx_map_tel"></div>
              <div>联系商家</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 商品详情 -->

      <div class="goods-content">
        <div class="goods-details" >
          <div class="details-title flex-a-c flex-j-c">
            <div class="left-line left-mr"></div>
            <span>套餐详情</span>
            <div class="left-line left-ml"></div>
          </div>
          <div class="combo-list">
            <block v-for="(goodsItem, goodsIndex) in getGoods.has_many_options" :key="goodsIndex">
              <div class="flex-j-sb combo-li">
                <div>{{ goodsItem.title }}</div>
                <div>¥{{ goodsItem.product_price }}</div>
              </div>
            </block>
          </div>

          <!-- <div v-for="(item, index) in getGoods.has_many_options" :key="index" class="flex-j-sb setMeal">
            <p>{{ item.title }}</p>
            <span>￥{{ item.product_price }}</span>
          </div> -->
        </div>
        <div class="goods-details" >
          <div class="details-title flex-a-c flex-j-c">
            <div class="left-line left-mr"></div>
            <span>购买须知</span>
            <div class="left-line left-ml"></div>
          </div>
          <div>
            <dl class="subscribe">
              <dt>预约方式</dt>
              <dd v-if="aroundGoods.bookingType === 0">无需预约，高峰期需等位</dd>
              <dd v-if="aroundGoods.bookingType === 1">网址预约</dd>
              <dd v-if="aroundGoods.bookingType === 2">电话预约</dd>
            </dl>
            <dl class="subscribe">
              <dt>购买日期</dt>
              <dd v-if="aroundGoods.beginTime !=0">即日起- {{ aroundGoods.beginTime }}</dd>
              <dd>结束日期- {{ aroundGoods.endTime }}</dd>
            </dl>
            <dl class="subscribe" v-if="aroundGoods.bookingText">
              <dt>预约须知</dt>
              <dd>{{ aroundGoods.bookingText }}</dd>
            </dl>
            <dl class="subscribe">
              <dt>使用时间</dt>
              <dd>{{ aroundGoods.validBeginDate }} - {{ aroundGoods.validEndDate }}</dd>
            </dl>
          </div>
        </div>
        <div class="goods-details" >
          <div class="details-title flex-a-c flex-j-c">
            <div class="left-line left-mr"></div>
            <span>图文介绍</span>
            <div class="left-line left-ml"></div>
          </div>
          <div class="outer-container" v-if="aroundGoods && aroundGoods.content.match(pattern)">
            <iframe :src="aroundGoods.content" ref="iframe" scrolling="yes" class="inner-container"    style="width: 106%; height: 100vh;" frameborder="0" ></iframe>
          </div>
          <div class="details-content" id="details-content" v-html="getGoods.plugin_id == 154 ? description : goodsDesc" v-else></div>
        </div>
      </div>

    </template>

    <div class="mb160"></div>
    <div class="shop-footer flex-a-c flex-j-sb set-pc-style">
      <div class="shop-left flex-a-c ">
        <div class="shop-icon-item " @click.stop="tapIndex">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/travel-around/index.png"/>
          <div class="shop-index">首页</div>
        </div>
        <div class="shop-icon-item" @click="clickChat">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/travel-around/news1.png"/>
          <div>客服</div>
        </div>
        <div class="shop-icon-item" @click="onFavorite">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/travel-around/collect.png" v-if="!favorite"/>
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/travel-around/coliect-like.png" v-else/>
          <div>收藏</div>
        </div>
      </div>
      <div class="shop-right flex-a-c">
        <div class="openGoods-btn flex-a-c flex-j-c" v-if="beginStatus === 0">
          <span>即将开售</span>
        </div>
        <div class="openGoods-btn flex-a-c flex-j-c" v-else-if="aroundGoods.isSoldOut === 1">
          <span>商品售罄</span>
        </div>
        <div class="openGoods-btn flex-a-c flex-j-c" v-else-if="beginStatus === -1">
          <span>立即购买</span>
        </div>
        <div class="openGoods-btn flex-a-c flex-j-c" v-else-if="beginStatus === 2">
          <span>活动结束</span>
        </div>
        <div class="openGoods-btn openGoods-bg flex-a-c flex-j-c" v-else @click="onPreorder">
          <span>立即购买</span>
        </div>
      </div>
    </div>
    <yz-service v-model="serviceShow" :url="cservice" :mobile="serviceMobile" :qr="serviceQRcode"></yz-service>
    <yz-specs 
      class="componentsThemeColor" 
      :goodsInfo="getGoods" 
      v-model="popupSpecs"  
      @closeSpecsPopup="close_yz_specs_popup">
    </yz-specs>
    <!-- 客服end -->
  </div>
</template>
<script>
import goodsDetails_controller from "./goodsDetails_controller.js";
export default goodsDetails_controller;
</script>
<style scoped>
.pl {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#goods-page ::v-deep .van-count-down {
  color: #fff;
  font-size: 0.625rem;
  line-height: 0.625rem;
}

#goods-page ::v-deep .van-notice-bar {
  background-color: rgba(0, 0, 0, 0.3);
  padding: 0 0.4375rem;
  color: #fff;
  min-width: 8.4375rem;
  border-radius: 0.6875rem;
  height: 1.3125rem;
  line-height: 1.3125rem;
}

/* .goods-details {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  border: 0 !important;
} */
.goods-details ::v-deep section {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  border: 0 !important;
}

.goods-details ::v-deep #details-content img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  border: 0 !important;
}

.goods-details ::v-deep .van-popup__close-icon--top-right {
  top: 1.625rem;
  right: 0.8125rem;
}

.notice-swipe ::v-deep .van-swipe-item {
  height: 1.3125rem;
}

.inner-container::-webkit-scrollbar {
  display: none;
}
</style>
<style lang="scss" scoped>
.notice-swipe {
  height: 21px;
  line-height: 21px;
  font-size: 11px;
  color: #fff;
  // line-height: 40px;
}

.mb20 {
  height: 0.625rem;
  clear: both;
}
.goods-content {
  margin:0 0.625rem;
  .goods-details {
    &:first-child {
      border-radius: 0.3125rem 0.3125rem 0 0;
    }
  }
}

.mb160 {
  height: 5rem;
}

.mb_14 {
  margin-bottom: 14px;
}

.blue {
  background-color: #2aa2ff;
  margin-right: 0.2813rem;
}

.yellow {
  background-color: #ffb536;
  margin-right: 0.2813rem;
}

.orange {
  background-color: #ff3a00;
  margin-right: 0.3438rem;
}

.goods-img {
  display: flex;
  position: relative;

  img {
    width: 100%;
  }

  .img-footer {
    width: 100%;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    padding: 0 0.5625rem 0.5625rem 0.5625rem;

    .distance {
      border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
      padding: 0.3125rem 0.4375rem;
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
    }

    .img-right {
      font-size: 0.625rem;
      line-height: 0.625rem;
      color: #fff;

      .panic {
        padding: 0.3125rem 0.6875rem;
        background: #11c9a4;
        border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
        margin-right: 0.3125rem;
      }

      .time-end {
        line-height: 0.625rem;
        padding: 0.3125rem 0.6875rem;
        background: #f10000;
        border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
      }

      .time-end:last-child {
        margin-left: 0.3125rem;
      }
    }
  }

  .floating {
    position: absolute;
    bottom: 1.25rem;
    left: 0.8125rem;
  }
}

.goods-img-tag {
  // width: 5rem;
  padding: 0 20px;
  height: 2.0938rem;
  line-height: 2.875rem;
  text-align: center;
  font-size: 0.625rem;
  color: #fff;
  position: absolute;
  left: 1.5rem;
  bottom: 0.625rem;
  background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/consumption-coupons/goods-img-tag.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.combo-li {
  font-size: 0.75rem;
  color: #888;
  position: relative;
  padding: 0 0 0 0.4688rem;
  margin: 0 0 0.75rem 0;

  &::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0.125rem;
    height: 0.125rem;
    background-color: #222;
  }
}

.start-time {
  position: absolute;
  right: 0.875rem;
  bottom: 0.9375rem;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 0.375rem 0.5938rem 0.4063rem 0.625rem;
  color: #fff;
  font-size: 0.8125rem;

  .van-count-down {
    color: #fff;
    font-size: 0.8125rem;
  }
}

.discount-price {
  padding: 10px 0 0 0;
  width: 23.4375rem;
  height: 4.4375rem;
  background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/lightning-bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  top: -0.75rem;
  position: relative;

  .flex-c {
    flex-direction: column;
  }

  .discount-left {
    font-size: 0.75rem;
    color: #fff;
    margin: 0 0 0 0.9375rem;
    flex-wrap: wrap;
    display: flex; //测试要求换行的
    flex-direction: column;

    .consumer {
      align-items: flex-end;
      // margin-bottom: 0.75rem;
      span {
        text-decoration: line-through;
      }
    }

    .repertory {
      margin-left: 1rem;
    }

    .discount-use {
      align-items: flex-end;
      white-space: nowrap;
      margin-bottom: 0.3125rem;
    }

    .number {
      font-size: 1.5rem;
      line-height: 1.5rem;
      color: #fff;
      margin-right: 0.125rem;
    }
  }

  .discount-right {
    margin-right: 1.1875rem;

    .reach {
      text-align: center;
      font-size: 0.75rem;
      line-height: 0.75rem;
      font-weight: bold;
      color: #f10000;
      border-radius: 3px;
      align-self: flex-end;
    }

    .price {
      margin-bottom: 0.4375rem;
      font-size: 2.1875rem;
      color: #ff3a00;
      white-space: nowrap;
      background-color: #fff;
      padding: 5px 7px;
      border-radius: 13px;

      img {
        width: 13px;
        height: 15px;
      }

      p {
        font-size: 13px;
        color: #f10000;
        margin-left: 6px;
      }
    }

    .sign {
      font-size: 0.9375rem;
      color: #ff3a00;
    }

    #goods-price {
      font-size: 2.1875rem;
      display: inline-block;
    }

    .at-discount {
      flex-direction: column;
      align-items: center;
      margin-left: 0.25rem;

      .discount-small {
        border-radius: 0.4688rem 0.4688rem 0.4688rem 0;
        background-color: #fff;
        color: #ff3a00;
        padding: 0 0.4375rem 0 0.3125rem;
        font-size: 0.75rem;
        margin-bottom: 0.4375rem;
        margin: 0 0.625rem 0.4375rem 0;
        white-space: nowrap;

        span {
          font-size: 0.6875rem;
        }
      }

      .small-price {
        font-size: 0.6875rem;
        color: #ff8954;
        display: inline-block;
        margin-bottom: 0.4375rem;
        text-decoration: line-through;
      }
    }

    .flex-d {
      flex-direction: row;
      align-items: center;
    }
  }
}

.goods-title {
  margin: 0.125rem 0.625rem 0.625rem 0.625rem;
  padding: 1.0625rem 0.8125rem;
  font-size: 1rem;
  line-height: 2rem;
  font-weight: 500;
  color: #222;
  text-align: left;
  background-color: #fff;
  border-radius: 0.3125rem;
  font-weight: bold;
}

.long-title {
  font-size: 0.85rem;
  color: #818181;
  line-height: 1.5;
}

.goods-inclusive {
  margin: 0.625rem;
  padding: 0.875rem 0.9375rem 1.0625rem 0.9375rem;
  background-color: #fff;
  border-radius: 0.3125rem;

  .title {
    font-weight: bold;
    color: #222;
    font-size: 1rem;
    text-align: left;
    margin-bottom: 1.1875rem;
  }

  .inclusive-list {
    flex-wrap: wrap;

    .inclusive-box {
      cursor: pointer;
      border-radius: 0.1875rem;
      margin-bottom: 0.625rem;
      margin-right: 1.5625rem;

      .inclusive-content {
        border: 0.0625rem solid #bfbfbf;
        padding: 0.625rem 0.8125rem;
        border-radius: 0.1875rem;
        position: relative;

        img {
          width: 0.6875rem;
          height: 0.6875rem;
          position: absolute;
          right: 0;
          bottom: 0;
        }

        p {
          font-size: 0.8125rem;
          font-weight: 400;
          color: #333;
          margin-right: 0.625rem;
          text-align: left;
        }

        span {
          font-size: 0.8125rem;
          color: #f10000;
        }
      }

      .border-on {
        border: 0.0625rem solid #f10000;
      }

      .inclusive-stock {
        border: none;
        background-color: #f6f6f6;

        p {
          color: #333;
        }
      }

      .on {
        border: 0.0625rem solid blue;
      }
    }
  }
}

.subscribe {
  text-align: left;

  dt {
    margin-bottom: 0.625rem;
    font-size: 15px;
    color: #222;
    margin: 0 0 10px 0;
    text-align: left;
  }

  dd {
    margin-left: 0.625rem;
    font-size: 12px;
    color: #555;
    position: relative;
    padding: 0 0 0 10px;
    margin: 0 0 8px 0;
    text-align: left;

    &::after {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background-color: #555;
    }
  }
}

.entrance-store {
  margin: 0 0.625rem;
  background-color: #fff;
  padding: 0.875rem 0.6875rem 0.875rem 0.875rem;
  border-radius: 0.3125rem;
  margin-bottom: 0.9375rem;

  .attribute {
    font-size: 0.75rem;
    font-weight: 500;
    color: #666;
    margin-right: 0.8125rem;
    white-space: nowrap;
  }

  .text {
    font-size: 0.75rem;
    font-weight: 500;
    color: #222;
  }

  .left {
    width: 70%;
  }

  .right {
    min-width: 30%;
    color: #848484;
    font-size: 0.75rem;
    justify-content: flex-end;
  }

  .region {
    font-size: 0.875rem;
    font-weight: 400;
    color: #555;
    text-align: left;
  }

  .location img,
  .location img {
    width: 0.5625rem;
    height: 0.6875rem;
    margin: 0 0.4375rem 0 0;
  }

  .mobile {
    width: 1.875rem;
    height: 1.875rem;

    img {
      width: 1.875rem;
      height: 1.875rem;
    }
  }

  .address {
    .store-name {
      font-size: 0.9375rem;
      color: #222;
      margin: 0 0 0.4688rem 0;
    }

    .address-details {
      font-size: 0.8125rem;
      color: #222;
      margin: 0 0 0.4688rem 0;
    }
  }

  .location {
    margin-top: 0.625rem;

    .distance {
      font-size: 0.75rem;
      color: #555;
      margin: 0 0.875rem 0 0;
    }

    .navigation {
      font-size: 0.75rem;
      color: #ff3a00;
    }
  }
}

.setMeal {
  p {
    margin-bottom: 0.625rem;
  }
}

.goods-like {
  margin: 0.625rem 0.625rem 0 0.625rem;
  padding-bottom: 1.0625rem;
  background-color: #fff;
  border-radius: 0.3125rem;

  h3 {
    font-size: 0.9375rem;
    font-weight: 400;
    color: #222;
    text-align: center;
    padding: 0.875rem 0 1.25rem 0;
  }

  .goodsLike-list {
    margin: 0 0.8125rem;

    .goodsLike-box {
      // width: 20.625rem;
      margin-bottom: 1.5625rem;

      .left {
        img {
          width: 3.4375rem;
          height: 3.4375rem;
          background: #282828;
          border-radius: 0.3125rem;
          margin-right: 0.5625rem;
        }
      }

      .right {
        width: 80%;
        text-align: left;

        .title {
          font-size: 0.8125rem;
          font-weight: 500;
          color: #222;
          margin-bottom: 0.5rem;
        }

        .sales {
          font-size: 0.625rem;
          font-weight: 400;
          color: #999;
          margin-bottom: 0.4375rem;
        }

        .price {
          font-size: 0.9375rem;
          color: #f10000;

          span {
            font-size: 0.625rem;
          }
        }

        .like-buyBtn {
          font-size: 0.625rem;
          color: #fff;
          padding: 0.25rem 0.625rem;
          background: #f10000;
          border-radius: 0.625rem;
        }
      }

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

#app {
  #details-content {
    img {
      max-width: 100%;
    }
  }
}

.flow-path {
  margin: 0 10px;
  background-color: #fff;
  padding: 13.5008px 13.5008px 9.5008px 13.5008px;
  border-radius: 5px;

  .title {
    font-size: 16px;
    color: #222;
    margin-bottom: 11.5008px;
    text-align: center;
  }

  .flow-content {
    .flow-content-img {
      width: 100%;

      img {
        width: 100%;
      }
    }
  }
}
// .flow-path .flow-item image {
//   width: 20px;
//   height: 20px;
//   margin-right: 4.5008px;
// }

.flow-path .flow-item .flow-item-text {
  font-size: 10px;
  color: #bababa;
}

/* 门店位置信息 */
.shop {
  margin: 0 10px;
  background-color: #fff;
  padding: 12px 13px 13px 11px;
  border-radius: 5px;

  .shop-title {
    margin: 0 0 15px 0;

    .title-name {
      font-size: 17px;
      color: #222;
    }

    .amount {
      width: 81.5008px;
      height: 27.5008px;
      line-height: 27.5008px;
      text-align: center;
      justify-content: center;
      align-items: center;
      background-image: linear-gradient(-85deg, #ff3d04 0%, #ff6a3f 100%);
      border-radius: 5px;
      font-size: 12px;
      color: #fff;
    }
  }
}

.merchant {
  color: #ff3a00;
  margin-left: 15px;
  border: 0.0625rem solid #ff3a00;
  border-radius: 15px;
  font-size: 10px;
  padding: 2px 9px 3.5008px 6.5008px;

  .icon-zx_map_tel {
    font-size: 10px;
    color: #ff3a00;
    margin-right: 5px;
  }
}

.goods-details {
  min-width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  padding: 20px 9px 10px 9px;

  .outer-container {
    position: relative;
    overflow: hidden;

    .inner-container {
      // position: absolute;
      left: 0;
      overflow-x: hidden;
      overflow-y: hidden;
    }
  }

  .details-title {
    font-size: 16.6656px;
    color: #222;
    text-align: center;
    margin-bottom: 12.5008px;

    .left-line {
      width: 96px;
      height: 1px;
      background-color: #dfdfdf;
    }

    .left-mr {
      margin-right: 13px;
    }

    .left-ml {
      margin-left: 13px;
    }
  }
}

.shop-footer {
  // width: 100%;
  // padding-right: 10px;
  width: 100%;
  height: 3.75rem;
  padding: 0 1.375rem;
  background-color: #fff;
  position: fixed;
  bottom: 0;

  .shop-left {
    .shop-icon-item {
      font-size: 0.75rem;
      margin-left: 2.1875rem;
      color: #222;

      img {
        width: 1.375rem;
        height: 1.375rem;
      }

      .shop-index {
        // padding-top: 2px;
      }
      // .iconfont {
      //   padding-bottom: .3125rem;
      // }
      .icon-bc_like {
        color: #f10000;
      }

      .icon-fontclass-pinglun2,
      .icon-bc_like_normal {
        padding-bottom: 0.125rem;
      }

      span {
        font-size: 1.3125rem;
      }
    }

    .shop-icon-item:first-child {
      margin-left: 0;
    }
  }

  .shop-right {
    .share-btn {
      width: 7.875rem;
      height: 2.5rem;
      line-height: 2.5rem;
      text-align: center;
      background-image: linear-gradient(90deg, #ff6b04 0%, #ffbe44 100%);
      border-radius: 1.25rem;
      font-size: 0.8125rem;
      color: #fff;
      margin-right: 0.375rem;
      border: none;

      &::after {
        border: none;
      }
    }

    .openGoods-btn {
      cursor: pointer;
      flex-direction: column;
      padding: 0.8125rem 2.8125rem;
      text-align: center;
      background-color: #b9b9b9;
      border-radius: 2.5rem;
      font-size: 0.8125rem;
      color: #fff;
    }

    .openGoods-bg {
      background: #f10000;
    }
  }
}

/* 客服 */

/* kefu */
.icon-close11 {
  font-size: 1.125rem;
}
</style>
